<script setup lang="ts">
defineOptions({
  name: "Container"
});
import { reactive, ref, onMounted } from "vue";
import {
  getContainerStatus,
  getServer,
  getNetworkList,
  getInstanceStatus
} from "@/api/server";
import { getVirtualList } from "@/api/virtual";
import { vmStatus, vmStatusColor } from "@/utils/hide";
import router from "@/router";
onMounted(async () => {
  await getServerList();
  await getList();
});
const containerBox = reactive({
  page: 1,
  count: 10,
  key: "",
  user_id: "",
  server_id: ""
});
const user_servers = ref([]);
const total = ref(10);
// 获取容器列表
const getList = async () => {
  let cons = await getVirtualList(containerBox);
  user_servers.value = cons.data.data;
  total.value = cons.data.count;

  // 创建一个 Promise 数组来处理每个 state 为 2 的项的异步请求
  const updatedServers = await Promise.all(
    user_servers.value.map(async item => {
      if (item.state != 2 && Sever_ID.value[item.server_id] != 0) {
        return { ...item, state: 3 };
      } else {
        let res = await getInstanceStatus(item.id);
        // 使用可选链操作符检查 res.data.data.data.state 是否存在
        const newState = res.data?.data?.data?.state;
        return { ...item, state: newState !== undefined ? newState : 3 };
      }
    })
  );
  user_servers.value = updatedServers;
};

const handleCurrentPageChange = async newPage => {
  containerBox.page = newPage;
  getList();
};
const handlePageSizeChange = async newSize => {
  containerBox.count = newSize;
  getList();
};
//服务器地区
const Sever_ID = ref();
const getServerList = async () => {
  let res = await getServer(1, 100, "", "hyperV");
  Sever_ID.value = res.data.data.reduce((acc, item) => {
    acc[item.server_id] = item.state;
    return acc;
  }, {});
  res = res.data.data.map(item => {
    return {
      name: item.name,
      id: item.server_id
    };
  });
  console.log(Sever_ID.value, "1111");
  options.value = options.value.concat(res);
};
const options = ref([{ name: "全部", id: "" }]);

// 地区选择切换
const tochange = () => {
  getList();
};
</script>

<template>
  <div class="body">
    <el-select v-model="containerBox.server_id" placeholder="请选择容器地区" style="width: 240px; margin-bottom: 10px"
      @change="tochange">
      <el-option v-for="(item, index) in options" :key="item.index" :label="item.name" :value="item.id" />
    </el-select>
    <div class="table-box">
      <el-table class="table_el" :data="user_servers" style="width: auto">
        <el-table-column label="ID" prop="id" show-overflow-tooltip />
        <el-table-column label="购买价格/元" prop="pay" />
        <el-table-column label="购买时间" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.created_at }}
          </template>
        </el-table-column>
        <el-table-column label="到期时间" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.become_time }}
          </template>
        </el-table-column>
        <el-table-column label="用户ID">
          <template #default="scope">
            <span class="userid" @click="router.push(`/users/info?user_id=${scope.row.user_id}`)">{{ scope.row.user_id
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag :type="vmStatusColor(scope.row.state)">
              {{ vmStatus(scope.row.state) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="230">
          <template #header>
            <el-input v-model="containerBox.key" size="small" placeholder="关键字筛选" @blur="getList" />
          </template>
          <template #default="scope">
            <el-button size="small"><router-link :to="`/servers/virtualInfo?container_id=${scope.row.id}`">
                管理</router-link></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div class="table_pagination">
      <el-pagination background layout="prev, pager, next,sizes" :total="total" :current-page="containerBox.page"
        :page-size="containerBox.count" :page-sizes="[10, 20, 50, 100]" @update:current-page="handleCurrentPageChange"
        @update:page-size="handlePageSizeChange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table_box {
  display: flex;
  flex-direction: column;
  height: 50%;
}

.table_box .table_el {
  flex: 1;
}

.table_pagination {
  background-color: #fff;
  padding: 8px 30px;
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
}

.userid {
  cursor: pointer;

  &:hover {
    color: dodgerblue;
  }
}
</style>
